<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 150px;
            height: 150px;
            background-color: #ccc;
            border-radius: 10px;
        }
    </style>
</head>
<body>

<div id="box" class="box1">
    你为什么这么开心？贺何博
    <span></span>
    <input id="search-input" type="text" value="zhangsan"></input>
</div>

<button onclick="changeAttribute()">操作属性值</button>
<button onclick="changeStyle()">操作样式的值</button>
<button onclick="changeText()">操作文本的值</button>


<script>
    //操作元素的属性值
    function changeAttribute() {
        //获取到页面中的元素
        var elementsByTagName = document.getElementById("search-input")
        console.log(elementsByTagName)
        //获得当前属性的类型以及属性的值
        console.log(elementsByTagName.type)
        console.log(elementsByTagName.value)
        //修改属性的类型以及值
        elementsByTagName.type = "password";
        elementsByTagName.value = "lisi";
    }

    //操作样式
    function changeStyle() {
        var elementById = document.getElementById("search-input");
        //更改样式
        elementById.style.color = "green";
        elementById.style.backgroundColor = "blue";
        elementById.style.borderRadius = "10px";
    }
    //操作标签中的文本
    function  changeText() {
        var elementById = document.getElementById("box");
        console.log(elementById.innerText)
        //修改属性的文本 innerText 只能够操作文本操作样式使用innerHtml
        //elementById.innerText="因为小孔对我笑了";
        elementById.innerHTML="<h1>因为小孔对我笑了</h1>"

    }
</script>
</body>
</html>